<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link type="text/css" rel="stylesheet" href="css/login.css">
    <link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<el-header class="" style="height: 86px;">
    <div class="main ch-header-index">
        <a class="ch-logo" href="/"> </a>
        <div class="ch-header-list">
            <a href="/kyzx/kp/wbwx.shtml" target="_blank"><i class="el-icon-service" title="官方微博"></i>官方微博</a>
        </div>
    </div>
</el-header>
<div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">考研帮</h3>
        <p style="color: red;">{{errormsg}}</p>
        <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username" type="text" auto-complete="off"
                      placeholder="账号">
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input prefix-icon="el-icon-goods" v-model="loginForm.password" type="password" auto-complete="off"
                      placeholder="密码"
                      @keyup.enter.native="handleLogin">
            </el-input>
        </el-form-item>
        <el-form-item prop="code">
            <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
                      @keyup.enter.native="handleLogin">

            </el-input>
            <div class="login-code">
                <img :src="codeUrl" @click="getCode"/>
            </div>
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                       @click.native.prevent="handleLogin">
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
            </el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    // axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web'
    axios.defaults.withCredentials = true
    var example1 = new Vue({
        el: '.login',
        data() {
            return {
                errormsg: "",
                codeUrl: "",
                cookiePassword: "",
                loginForm: {
                    username: "admin",
                    password: "admin123",
                    rememberMe: false,
                    code: "",
                    uuid: ""
                },
                loginRules: {
                    username: [{
                        required: true,
                        trigger: "blur",
                        message: "用户名不能为空"
                    }],
                    password: [{
                        required: true,
                        trigger: "blur",
                        message: "密码不能为空"
                    }],
                    code: [{
                        required: true,
                        trigger: "change",
                        message: "验证码不能为空"
                    }]
                },
                loading: false,
                redirect: undefined,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        created() {
            this.getCode();
            // this.getCookie();
        },
        methods: {
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        if (this.loginForm.rememberMe) {
                            Cookies.set("username", this.loginForm.username, {
                                expires: 30
                            });
                            Cookies.set("password", this.loginForm.password, {
                                expires: 30
                            });
                            Cookies.set('rememberMe', this.loginForm.rememberMe, {
                                expires: 30
                            });
                        } else {
                            Cookies.remove("username");
                            Cookies.remove("password");
                            Cookies.remove('rememberMe');
                        }
                        axios.get(`http://localhost:8081/login`, {
                            params: example1.loginForm,
                        })
                            .then(res => {
                                console.log('res=>', res);
                                if (res.data.code == 200) {
                                    Cookies.set("username", res.data.data.username)
                                    window.location.href = "index.html"
                                } else if (res.data.code == 500) {
                                    this.loading = false;
                                    this.errormsg = res.data.msg;
                                    this.getCode();
                                    this.loginForm.code = "";
                                }
                            }).catch(function (error) {
							this.loading = false;
							this.errormsg = '网络错误';
							this.getCode();
							this.loginForm.code = "";
                        })
                        /* axios.get('http://localhost:8081/captchaImage')
                            .then(function(res) {
                                example1.codeUrl = "data:image/gif;base64," + res.data.img;
                                console.log(res);
                            })
                            .catch(function(error) {
                                console.log(error);
                            }); */
                    }
                });
            },
            getCode() {
                codeUrl = this.codeUrl;
                axios.get('http://localhost:8081/captchaImage')
                    .then(function (res) {
                        example1.codeUrl = "data:image/gif;base64," + res.data.img;
                        console.log(res);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        }
    });
</script>
</html>
